<template>
  <div class="app-container">
    <el-card>
      <div style="margin-top: 20px; display: flex">
        <div style="margin-right: 40px">用户ID：{{ form.id }}</div>
        <div>用户昵称：{{ form.nickname }}</div>
      </div>
      <div v-if="form.nickname" style="margin-top: 20px">
        作者：{{ form.nickname }}
      </div>
      <!--<div style="margin-top: 20px">-->
      <!--  帖子原文：<span-->
      <!--  @click="commentDetail"-->
      <!--  style="color: #3a8ee6; cursor: pointer"-->
      <!--&gt;详情</span >-->
      <!--</div>-->
      <div style="margin-top: 20px">问题描述：{{ form.content }}</div>
      <div class="pageRight">
        <el-button @click="batchSuccess()" type="primary" size="mini" style="width: 100px">批量通过</el-button>
        <el-button @click="batchFail()" type="danger" size="mini" style="width: 100px">批量拒绝</el-button>
        <el-button size="small" icon="el-icon-delete" style="width: 100px" @click="deleteManyComment()">批量删除</el-button>
      </div>
      <div style="margin-top: 20px">
        <el-table size="mini" :data="tableData.data" border style="width: 100%" @selection-change="selectTableList">
          <el-table-column align="center" type="selection" width="55"></el-table-column>
          <el-table-column prop="id" align="center" label="ID" width="100">
          </el-table-column>
          <el-table-column align="center" label="用户">
            <template slot-scope="scope">
              <el-image :src="scope.row.memberIcon" style="width: 40px; height: 40px"></el-image>
            </template>
          </el-table-column>
          <el-table-column align="center" prop="memberNickname" label="昵称">
          </el-table-column>
          <el-table-column prop="comment" align="center" label="评论内容">
          </el-table-column>
          <el-table-column align="center" prop="createTime" label="评论时间">
          </el-table-column>
          <el-table-column align="center" prop="verifyStatus" label="审核状态">
            <template slot-scope="scope">
              <el-tag v-if="scope.row.verifyStatus == 0" size="mini"  type="info">待审核</el-tag>
              <el-tag v-if="scope.row.verifyStatus == 1" size="mini" type="success">审核通过</el-tag>
              <el-tag v-if="scope.row.verifyStatus == 2" size="mini" type="danger">审核未通过</el-tag>
            </template>
          </el-table-column>
          <!--<el-table-column align="center" prop="replayCount" label="回复数">-->
          <!--</el-table-column>-->
          <el-table-column align="center" label="操作">
            <template slot-scope="scope">
              <el-button v-if="scope.row.verifyStatus == 0" type="text" size="mini"
                @click="editArticleStatus(scope.row)">审核</el-button>
              <!-- <el-button v-if="scope.row.verifyStatus == 1" type="success" size="mini">审核通过</el-button>
              <el-button v-if="scope.row.verifyStatus == 2" type="text" size="mini">审核未通过</el-button> -->
              <el-button size="mini" type="text" @click="deleteComment(scope.row.id)">删除</el-button>
              <el-button size="mini" type="text" v-if="parseFloat(scope.row.replayCount) > 0"
                @click="seeReplydetail(scope.row)">查看回复</el-button>
            </template>
          </el-table-column>
        </el-table>
        <el-pagination class="pageRight" background @size-change="handleSizeChange"
          @current-change="handleCurrentChange" :page-sizes="[10, 20, 30, 40]" :current-page="searchForm.pageNum"
          :page-size="searchForm.pageSize" layout="total, sizes, prev, pager, next, jumper" :total="tableData.total">
        </el-pagination>
      </div>
    </el-card>
    <edit ref="edit" :title="form.content" @getList="getList"></edit>
    <reply-list @close="closeDraver" ref="replyRef"></reply-list>
  </div>
</template>
<script>
import replyList from "../components/replyList.vue";
import edit from "./components/edit.vue";
import {
  getArticleInfo,
  getCommentList,
  deleteComment,
  verify,
} from "@/api/article";
import { batchVerify } from "@/api/rank";
export default {
  components: {
    replyList,
    edit
  },
  name: "talk",
  data() {
    return {
      id: "",
      form: {},
      tableData: {
        data: [],
        total: 0,
      },
      searchForm: {
        pageNum: 1,
        pageSize: 10,
      },
      selectList: [],
    };
  },
  async created() {
    if (this.$route.query.id) {
      this.id = this.$route.query.id;
      await this.getInfo();
      await this.getList();
    }
  },
  methods: {
    editArticleStatus(v) {
      this.$refs.edit.opendialog(v);
    },
    toExamine(e) {
      var obj = {
        commentId: e.memberId,
        replayId: e.id,
        verifyStatus: 1,
        topStatus: 0,
      };
      verify(obj).then(async (res) => {
        this.$message({
          message: "审核通过",
          type: "success",
        });
      });
    },
    closeDraver() {
      this.getList();
    },
    seeReplydetail(row) {
      this.$refs.replyRef.openDrawer(row);
      this.drawerFlag = true;
    },
    selectTableList(val) {
      this.selectList = val;
    },
    batchSuccess() {
      if (this.selectList.length == 0) return this.$message.warning("请选择要通过的数据");
      const isflag = this.selectList.some((v) => {
        return v.verifyStatus == 1 || v.verifyStatus == 2
      });
      if (isflag) return this.$message.warning("请选择未审核的数据");
      this.$confirm("此操作将永久通过该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = this.selectList.map((v) => {
          return {
            commentId: v.id
          }
        });
       
        let params = {
          commentVerifyList: ids,
          verifyStatus: 1
        }
        batchVerify(params).then(async (res) => {
          this.$message({
            message: "审核通过",
            type: "success",
          });
           this.getList();
        });
      })
    },

    batchFail() {
      if (this.selectList.length == 0) return this.$message.warning("请选择要拒绝的数据");
      const isflag = this.selectList.some((v) => {
        return v.verifyStatus == 1 || v.verifyStatus == 2
      });

      if (isflag) return this.$message.warning("请选择未审核的数据");
      this.$confirm("此操作将永久拒绝该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        let ids = this.selectList.map((v) => {
          return {
            commentId: v.id
          }
        });
        let params = {
          commentVerifyList: ids,
          verifyStatus: 2
        }
        batchVerify(params).then(async (res) => {
          this.$message({
            message: "拒绝成功",
            type: "success",
          });
           this.getList();
        });
      })
    },
    deleteManyComment() {
      if (this.selectList.length == 0) {
        this.$message({
          message: "请选择要删除的评论",
          type: "warning",
        });
        return;
      } else {
        this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
          confirmButtonText: "确定",
          cancelButtonText: "取消",
          type: "warning",
        }).then(() => {
          let ids = [];
          this.selectList.forEach((v) => {
            ids.push(v.id);
          });
          deleteComment(ids.join(",")).then(async (res) => {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            await this.getInfo();
            await this.getList();
          });
        });
      }
    },
    deleteComment(v) {
      this.$confirm("此操作将永久删除该评论, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(() => {
        deleteComment(v).then(async (res) => {
          if (res.code == 200) {
            this.$message({
              message: "删除成功",
              type: "success",
            });
            await this.getInfo();
            await this.getList();
          }
        });
      });
    },
    handleSizeChange(val) {
      this.searchForm.pageSize = val;
      this.getList();
    },
    handleCurrentChange(val) {
      this.searchForm.pageNum = val;
      this.getList();
    },
    commentDetail() {
      if (this.form.type == 1) {
        this.$router.push({
          path: "/article/detail",
          query: {
            id: this.id,
          },
        });
      } else {
        this.$router.push({
          path: "/content/postDetail",
          query: {
            id: this.id,
          },
        });
      }
    },
    getInfo() {
      getArticleInfo(this.id).then((res) => {
        console.log(res.data);
        res.data.imageUrl = res.data.imageUrl && res.data.imageUrl.split(",");
        this.form = res.data;
      });
    },
    getList() {
      let params = {
        articleId: this.id,
        ...this.searchForm,
      };
      getCommentList(params).then((res) => {
        console.log('res.data.list', res.data.list);

        this.tableData.data = res.data.list;
        console.log('res.data.list', res.data.list);

        this.tableData.total = res.data.total;
      });
    },
  },
};
</script>

<style scoped lang="scss">
.app-container {
  height: calc(100vh - 50px);
  background-color: #f5f5f5;
  position: relative;
}
</style>
